<template>
    <div ref="container" class="bg">
        <el-button v-if="!isScreenshot" class="close" @click="close">关闭</el-button>
        <el-button v-else class="close" @click="htmlToImage">确定</el-button>
        <div class="canvas-container">
            <div
                class="canvas"
                :style="{
                    ...getCanvasStyle(canvasStyleData),
                    width: '100vw',
                    height: '100vh',
                }"
            >
                <div id="header">
                    <!--时间-->
                    <div id="nowTime">{{ nowTime }}</div>
                    <!--日期和星期-->
                    <div id="nowDate">{{ nowDate }}</div>
                    <span id="title">电气线路图</span>
                    <div id="edit">
                        <el-button type="primary">编辑</el-button>
                    </div>
                </div>
                <ComponentWrapper
                    v-for="(item, index) in copyData"
                    :key="index"
                    :config="item"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { getCanvasStyle } from '@/utils/style'
import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/utils/translate'
import { toPng } from 'html-to-image'
import { deepCopy } from '@/utils/utils'

export default {
    components: { ComponentWrapper },
    props: {
        isScreenshot: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            copyData: [],
            nowTime: '13:58:59', // 时间
            nowDate: '2023年7月17日 星期一', // 日期和星期
        }
    },
    computed: mapState([
        'componentData',
        'canvasStyleData',
    ]),
    created() {
        this.$set(this, 'copyData', deepCopy(this.componentData))
    },
    mounted() {
        this.currentTime()
    },
    methods: {
        getCanvasStyle,
        changeStyleWithScale,

        close() {
            this.$emit('close')
        },

        htmlToImage() {
            toPng(this.$refs.container.querySelector('.canvas'))
            .then(dataUrl => {
                const a = document.createElement('a')
                a.setAttribute('download', 'screenshot')
                a.href = dataUrl
                a.click()
            })
            .catch(error => {
                console.error('oops, something went wrong!', error)
            })
            .finally(this.close)
        },

        currentTime() {
            setInterval(this.formatDate, 500);
        },
        formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}年${month}月${day}日 ${weekArr[week]}`;
            this.nowTime = `${hour}:${minute}:${second}`;
        },
    },
    // 销毁定时器
    beforeDestroy() {
        if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: rgb(0, 0, 0, .5);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 20px;

    .canvas-container {
        width: calc(100% - 40px);
        height: calc(100% - 120px);
        overflow: auto;

        .canvas {
            background: #fff;
            position: relative;
            margin: auto;
        }
    }

    .close {
        position: absolute;
        right: 20px;
        top: 20px;
    }
}

/* 头部 */
#header {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-image: url('../../assets/光@2x.png');
    background-size: 100% 120%;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    background-color: #081138;
    border: rgb(55, 56, 154) 2px solid;
    box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
}

#header #nowTime {
    color: white;
    width: 12rem;
    height: 5rem;
    line-height: 7rem;
    font-size: 30px;
    vertical-align: middle;
    text-align: right;
}

#header #nowDate {
    color: white;
    width: 15rem;
    height: 5rem;
    line-height: 7.5rem;
    font-size: 16px;
    margin-left: 2rem;
}

#header #title {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 10px;
    color: white;
    line-height: 3.8rem;
    width: 42.5rem;
    height: 100%;
}

#header #edit {
    width: 10rem;
    height: 5rem;
    line-height: 7.5rem;
    text-align: center;
    margin-left: 15rem;
}
</style>
